<template>
    <div class="main-con editStoreGrouping">
        <!-- 顶部导航 -->
        <div class="breadcrumb-con">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index/storeGrouping' }">门店分组</el-breadcrumb-item>
                <el-breadcrumb-item>{{ editText }}门店分组</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 表单信息 -->
        <div class="form-con">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                <h2 class="item-title">
                    门店分组信息
                </h2>
                <div class="form-item-con">
                    <el-form-item label="分组名称" prop="name">
                        <div class="form-item-input">
                            <el-input size="small" v-model="ruleForm.name" placeholder="请输入分组名称"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="选择门店" required>
                        <el-radio-group v-model="ruleForm.containsAll" @change="changeContainsAll">
                            <el-radio :label="1">选择所有门店</el-radio>
                            <el-radio :label="0">选择部分门店</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class='add-store-btn-con'>
                        <span class='add-btn' @click="selectStore">+</span>
                        <span @click="selectStore">添加门店</span>
                    </div>
                    <div class="table-con">
                        <el-table :data="selectedStoreData" border size="mini" :header-cell-style="{background:'#f8f8f8'}"
                            style="width: 50%">
                            <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column prop="storeNo" label="门店编号" width="" align="center" :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column prop="storeName" label="门店名称" width="" align="center"
                                :show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column label="操作" width="" align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="danger" :disabled="ruleForm.containsAll == 1" @click="handleDeleteStore(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pagination-con" style="width: 50%" v-if="ruleForm.containsAll == 1">
                        <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total"
                            @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
                        </m-pagination>
                    </div>
                </div>
                <div class="submit-btn-con">
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="handleBack">取消</el-button>
                </div>
            </el-form>
        </div>

        <!-- 选择门店 -->
        <m-singleselectstore :showSelectStoreCon="showSelectStoreCon" @close="colseStoreCon" @sure="sureSelectStore"></m-singleselectstore>
    </div>
</template>

<script>
import {
    addStoreGrouping,
    updateStoreGrouping,
    getEditStoreGroupInfo
} from "@/common/service/storeManagement/storeGrouping.js";
import { queryStoreInfo } from "@/common/service/storeManagement/storeInfo.js";
import mSingleselectstore from "@/components/m-singleselectstore/index.vue";
import mPagination from "@/components/m-pagination/m-pagination";
export default {
    name: "editStoreGrouping",
    data() {
        return {
            editType: "", //操作类型  add=添加  update=修改
            editText: "", //操作文字
            editId: "", //操作的id
            editData: "", //操作的数据
            //表单信息
            ruleForm: {
                name: "",
                containsAll: 0
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入分组名称",
                        trigger: "blur"
                    }
                ]
            },
            //选择门店
            selectedStoreData: [], //已选的门店
            currentSelectStore: [], //部分门店当前所选门店
            total: null, //门店总条数
            showSelectStoreCon: false, //控制选择门店弹窗的显示隐藏标识
            //搜索条件
            formData: {
                pageNum: 1,
                pageSize: 10
            }
        };
    },
    created() {
        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;
        if (this.editType == "update") {
            this.editId = this.$route.query.editId;
            this.editData = JSON.parse(localStorage.getItem("editData"));
            this.ruleForm.id = this.editData.id;
            this._getEditStoreGroupInfo();
        }
    },
    beforeDestroy() {
        //清除本地缓存的编辑数据
        localStorage.removeItem("editData");
    },
    methods: {
        /*-----------------------------监测选择门店的改变操作-----------------------------*/
        //监测选择门店的改变
        changeContainsAll(val) {
            if (val == 1) {
                this.formData.pageNum = 1;
                this._queryAllStoreInfo();
            } else if (val == 0) {
                this.selectedStoreData = this.currentSelectStore;
            }
        },

        /*-----------------------------查询操作-----------------------------*/
        //查询所有的门店信息
        _queryAllStoreInfo() {
            queryStoreInfo(this.formData)
                .then(res => {
                    this.selectedStoreData = res.list;
                    this.total = res.totalCount;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryAllStoreInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryAllStoreInfo();
        },
        //查询编辑的信息
        _getEditStoreGroupInfo() {
            var data = {
                id: this.ruleForm.id
            };
            getEditStoreGroupInfo(data)
                .then(res => {
                    this.ruleForm.name = res.name;
                    this.ruleForm.containsAll = res.containsAll;
                    this.selectedStoreData = res.stores;
                    this.currentSelectStore = res.stores;
                    if (res.containsAll == 1) {
                        this.currentPage = 1;
                        this._queryAllStoreInfo();
                    }
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------选择门店操作-----------------------------*/
        //显示选择门店弹窗
        selectStore() {
            this.showSelectStoreCon = true;
        },
        //隐藏选择门店弹窗
        colseStoreCon(val) {
            this.showSelectStoreCon = val;
        },
        //渲染选择的门店
        sureSelectStore(val) {
            const self = this;
            if (!this.selectedStoreData) {
                this.selectedStoreData = [];
            }
            var selected = this.selectedStoreData;
            var curSelect = JSON.parse(val);
            curSelect.forEach((item, index) => {
                var flag = true;
                selected.forEach((item1, index) => {
                    if (item1.storeNo == item.storeNo) {
                        flag = false;
                    }
                });
                if (flag) {
                    self.selectedStoreData.push(item);
                }
            });
            this.showSelectStoreCon = false;
            this.currentSelectStore = this.selectedStoreData;
        },
        //删除选择的门店
        handleDeleteStore(index, row) {
            this.selectedStoreData.splice(index, 1);
        },

        /*-----------------------------新增操作-----------------------------*/
        _addStoreGrouping() {
            var data = {};
            if (this.ruleForm.containsAll == 0) {
                var storeNoListArr = [];
                this.selectedStoreData.forEach((item, index) => {
                    storeNoListArr.push(item.storeNo);
                });
                var storeNoList = storeNoListArr.join(",");
                data = {
                    name: this.ruleForm.name,
                    containsAll: this.ruleForm.containsAll,
                    storeNoList: storeNoList
                };
            } else {
                data = {
                    name: this.ruleForm.name,
                    containsAll: this.ruleForm.containsAll,
                    storeNoList: ""
                };
            }
            addStoreGrouping(data)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "添加成功!"
                    });
                    this.handleBack();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------编辑操作-----------------------------*/
        _updateStoreGrouping() {
            var data = {};
            if (this.ruleForm.containsAll == 0) {
                var storeNoListArr = [];
                this.selectedStoreData.forEach((item, index) => {
                    storeNoListArr.push(item.storeNo);
                });
                var storeNoList = storeNoListArr.join(",");
                data = {
                    id: this.ruleForm.id,
                    name: this.ruleForm.name,
                    containsAll: this.ruleForm.containsAll,
                    storeNoList: storeNoList
                };
            } else {
                data = {
                    id: this.ruleForm.id,
                    name: this.ruleForm.name,
                    containsAll: this.ruleForm.containsAll,
                    storeNoList: ""
                };
            }
            updateStoreGrouping(data)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "编辑成功!"
                    });
                    this.handleBack();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*-----------------------------保存校验数据操作-----------------------------*/
        // 点击确定
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.selectedStoreData.length == 0) {
                        this.$message.error("门店不能为空");
                    } else if (this.editType == "add") {
                        this._addStoreGrouping();
                    } else if (this.editType == "update") {
                        this._updateStoreGrouping();
                    }
                } else {
                    return false;
                }
            });
        },

        /*-----------------------------返回操作-----------------------------*/
        handleBack() {
            this.$router.push({
                path: "/index/storeGrouping"
            });
        }
    },
    components: {
        "m-singleselectstore": mSingleselectstore,
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.add-store-btn-con {
    color: #606266;
    margin-top: -22px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.add-store-btn-con .add-btn {
    margin-right: 5px;
    font-size: 24px;
}
.submit-btn-con {
    margin-top: 22px;
}
</style>